<template>
  <div class="box-container">
    <div class="box-top">
      <div class="t1">Hi，欢迎使用磐石系统</div>
    </div>
    <div class="box-content">
      <div class="box-list">
        <div class="box-item" @click="list_1Fn">
          <div class="title">
            <p class="t1">项目管理</p>
          </div>
          <div class="box">
            <div class="aaa">
              <img src="../assets/image/home-icon-1.png" alt="" class="icon">
              <div class="txt">
                <p class="p1">管理你的项目信息</p>
                <p class="p2">添加、修改、删除项目，主项目分配人员</p>
              </div>
              <div class="btn">pipeline</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-list">
        <div class="box-item" @click="list_2Fn">
          <div class="title">
            <p class="t1">工时管理</p>
          </div>
          <div class="box">
            <div class="aaa">
              <img src="../assets/image/home-icon-2.png" alt="" class="icon">
              <div class="txt">
                <p class="p1">填报并管理工时信息</p>
                <p class="p2">添加工时信息，查看名下成员工时信息，发送工时周报</p>
              </div>
              <div class="btn">工时填报</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-list">
        <div class="box-item" @click="list_3Fn">
          <div class="title">
            <p class="t1">招聘管理</p>
          </div>
          <div class="box">
            <div class="aaa">
              <img src="../assets/image/home-icon-3.png" alt="" class="icon">
              <div class="txt">
                <p class="p1">管理招聘流程</p>
                <p class="p2">HR、面试官管理简历并对简历进行相应操作</p>
              </div>
              <div class="btn">招聘管理</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-list">
        <div class="box-item" @click="list_4Fn">
          <div class="title">
            <p class="t1">面试官管理</p>
          </div>
          <div class="box">
            <div class="aaa">
              <img src="../assets/image/home-icon-4.png" alt="" class="icon">
              <div class="txt">
                <p class="p1">管理面试官权限</p>
                <p class="p2">添加、删除面试官权限</p>
              </div>
              <div class="btn">面试官管理</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data (){
      return {};
    },
    methods: {
      list_1Fn (){
        this.$router.push({ path: "/pmp/pipline" });
      },
      list_2Fn (){
        this.$router.push({ path: "/pmp/workhour" });
      },
      list_3Fn (){
        this.$router.push({ path: "/pmp/recruit" });
      },
      list_4Fn (){
        this.$router.push({ path: "/pmp/Interviewer" });
      }
    }
  };
</script>

<style lang="less" scoped>
  .box-container{ padding: 15px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #f4f4f4;}
  .box-top{ width: 100%; height: 35%; background: url('../assets/image/home-1.png') no-repeat 0 0; background-size: 100% 100%; display: flex;
    .t1{ align-self: center; margin: 0 auto; color: #2689FF; font-size: 30px; }
  }
  .box-content{ width: 100%; height: 65%;
     .box-list{ width: 50%; height: 50%; float: left; overflow: hidden; padding: 15px 15px 0 0; box-sizing: border-box; cursor: pointer;
      &:nth-child(even){padding-right: 0; }
     }
     .box-item{ width: 100%; height: 100%; background: #fff;
      .title{ border-bottom: 1px solid #E8E8E8; height: 35%; width: 100%; padding-left: 20px; overflow: hidden;   display: flex;
        .t1{ align-self: center; font-size: 17px; color:#333; }
      }
      .box{ width: 100%; height: 65%; display: flex;
        .aaa{ align-self: center; margin: 0 auto; width: 85%; }
        .icon{ width: 40px; height: 40px; float: left;}
        .txt{ float: left; margin-left: 10px; line-height: 22px;
          .p1{ font-size: 15px; padding: 0; margin: 0; color:#333; }
          .p2{ font-size: 12px; padding: 0; margin: 0; color:#999; }
        }
        .btn{ float: right; width: 90px; height: 30px; border: 1px solid #2689FF; border-radius: 15px; color: #2689FF;  font-size: 14px; line-height: 28px; text-align: center; }
      }
     }
  }
</style>

<!-- <style lang="less" scoped>
  .box-container{ flex-flow: row wrap; padding: 15px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; background: #f4f4f4;}
  .box-top{ width: 100%; height: 35%; background: url('../assets/image/home-1.png') no-repeat 0 0; background-size: 100% 100%;}

  .box-content{ width: 100%; height: 65%; flex-wrap: wrap; display:flex;
     .box-list{ width: 50%; height: 50%;padding: 15px 15px 0 0;
      &:nth-child(even){padding-right: 0; }
     }
     .box-item{ width: 100%; height: 100%; background: #fff; overflow: hidden; display: block;
      .title{ border-bottom: 1px solid #E8E8E8; height: 35%; width: 100%; overflow: hidden;  line-height: 100%; display: block; background: #f00; }
     }
  }
</style> -->
